import React, { useState } from 'react';
import {NavLink} from 'react-router-dom';

import { Table, Space, Image, Avatar, Input, Button } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import "./style/DMManagement.less"

// const { Column, ColumnGroup } = Table;
const { Search } = Input;


export default function StoreManagement(props) {
    const dataSource = [
        {
            key: 1,
            id: 1,
            name: 'XX剧本杀',
            manager: "王明",
            phone: 13366668888,
            level: 2,
            experienceYear: 3,
            headPortrait: "url",
            img: "url",
            description: "古风"
        },
        {   
            key: 2,
            id: 2,
            name: 'XX剧本杀',
            manager: "王明",
            phone: 13366668888,
            level: 2,
            experienceYear: 3,
            headPortrait: "url",
            img: "url",
            description: "古风"
        },
        {
            key: 3,
            id: 3,
            name: 'XX剧本杀',
            manager: "王明",
            phone: 13366668888,
            level: 2,
            experienceYear: 3,
            headPortrait: "url",
            img: "url",
            description: "古风"
        },
      ];
      
      const columns = [
        {
          title: '门店照片',
          dataIndex: 'headPortrait',
          key: 'headPortrait',
          align: "center",
          className: "table-head-bg",
          render: (text, record) => <Avatar size={64} icon={<UserOutlined />} />
        },
        {
            title: '店名',
            dataIndex: 'name',
            key: 'name',
            align: 'center',
            className: "table-head-bg",
        },
        {
            title: '店长',
            dataIndex: 'manager',
            key: 'manager',
            align: 'center',
            className: "table-head-bg",
        },
        {
            title: '电话',
            dataIndex: 'phone',
            key: 'phone',
            align: 'center',
            className: "table-head-bg",
        },
        {
            title: '开店年长',
            dataIndex: 'experienceYear',
            key: 'experienceYear',
            className: "table-head-bg",
        },
        {
            title: '等级',
            dataIndex: 'level',
            key: 'level',
            className: "table-head-bg",
        },
        {
            title: '操作',
            key: 'action',
            align: "center",
            render: (_, record) => (
                <Space size="middle" className='operate-link'>
                    <a>编辑</a>
                    {/* <a onClick={viewInfo(record.id, record.name)}>查看</a> */}
                    <NavLink to={`/management/storeInfromation/${record.id}`}>查看</NavLink>
                    <a>删除</a>
                </Space>
            ),
            className: "table-head-bg",
        },
      ];
      const onSearch = (value) => console.log(value);
      const getRowClassName = (_, index) => {
        return index % 2 === 0 ? "oddRow" : "evenRow";
      }
      const viewInfo = (id, name) => {
        this.props.history.push(`/management/storeInfromation/${id}/${name}`);
      }
      const [total,setTotal] = useState(dataSource.length);


    return (
        <div>
            <div className="mapage-header">{props.title}</div>
            <div className='madata-container'>
                <div className='madata-search'>
                    <Search placeholder="请输入想查找的店名" enterButton allowClear onSearch={onSearch} style={{ width: 400 }} />
                </div>
                <Table 
                    dataSource={dataSource}
                    columns={columns} 
                    pagination={{
                        showSizeChanger:true,
                        showQuickJumper:true,
                        showTotal: (total) => `Total ${total} items`,
                        position: ["bottomCenter"]
                    }}
                    style={{marginTop:20}}
                />
            </div>
        </div>
    )
}